<template>
  <div class="common-layout">
    <el-container>
      <el-header>
<!--      <div style="">-->
        <el-row :gutter="10">
         <el-col :span="4"></el-col>
          <el-col :span="17">
            <el-menu mode="horizontal" @select="handleSelect" default-active="activeMenu" >
            <div style="display: flex;">
              <el-menu-item index="1"><a href="/"><img src="/image/logo.png"></a></el-menu-item>
              <el-menu-item index="2" :style="{ backgroundColor: activeMenu === '2' ? 'palegreen' : '' }"><router-link to="/index">音乐馆</router-link></el-menu-item>
              <el-menu-item index="3" :style="{ backgroundColor: activeMenu === '3' ? 'palegreen' : '' }"><router-link to="/other">我的音乐</router-link></el-menu-item>
              <el-menu-item index="4" :style="{ backgroundColor: activeMenu === '4' ? 'palegreen' : '' }"><router-link to="/other">客户端</router-link></el-menu-item>
              <el-menu-item index="5" :style="{ backgroundColor: activeMenu === '5' ? 'palegreen' : '' }"><router-link to="/other">开放平台</router-link></el-menu-item>
              <el-menu-item index="6" :style="{ backgroundColor: activeMenu === '6' ? 'palegreen' : '' }"><router-link to="/other">VIP</router-link></el-menu-item>
              <!--          <el-menu-item index="6">VIP</el-menu-item>-->
            </div>

            <div style="position: relative;display:flex; justify-content: center;align-items: center;margin-left: 40px;margin-right: 15px">
              <el-input placeholder="搜索音乐、MV、歌单、用户"style="width: 240px">

              </el-input>
              <el-button style="position: absolute;right: 1px" icon="Search" />
            </div>

            <el-menu-item index="7">登录</el-menu-item>
            <el-sub-menu index="8">
              <template #title >
                <el-button type="success">开通VIP</el-button>
              </template>
              <el-menu-item index="8-1">开通超级会员</el-menu-item>
              <el-menu-item index="8-2">开通绿钻豪华版</el-menu-item>
            </el-sub-menu>
            <div>
              <el-sub-menu index="9">
                <template #title >充值</template>
                <el-menu-item index="9-1">购买乐币</el-menu-item>
                <el-menu-item index="9-2">充值饭票</el-menu-item>
              </el-sub-menu>
            </div>
          </el-menu>
          </el-col>
        </el-row>

<!--      </div>-->



      </el-header>
      <el-main>
        <router-view/>
<!--        <el-row :gutter="10">-->
<!--        <el-col :span="7"></el-col>-->
<!--        <el-col :span="9" style="">-->
<!--          <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">-->
<!--            <el-menu-item index="10-1">首页</el-menu-item>-->
<!--            <el-menu-item index="10-2">歌手</el-menu-item>-->
<!--            <el-menu-item index="10-3">新碟</el-menu-item>-->
<!--            <el-menu-item index="10-4">排行榜</el-menu-item>-->
<!--            <el-menu-item index="10-5">分类歌单</el-menu-item>-->
<!--            <el-menu-item index="10-6">电台</el-menu-item>-->
<!--            <el-menu-item index="10-7">MV</el-menu-item>-->
<!--            <el-menu-item index="10-8">数字专辑</el-menu-item>-->
<!--          </el-menu>-->
<!--        </el-col>-->
<!--      </el-row>-->
      </el-main>

      <el-footer style="background-color:#333;height: 709px;"  >
        <el-row :gutter="10">
         <el-col :span="4"></el-col>
          <el-col :span="16" style="">
            <el-row :gutter="10">
<!--             <el-col :span="8">-->
<!--               <p style="margin-top: 60px;color: grey">下载QQ音乐客户端</p>-->
<!--               <div style="display: flex;color: grey">-->

<!--                 <div style="width: 20%;text-align: center;">-->
<!--                   <el-icon><Platform /></el-icon>-->
<!--                   <br>-->
<!--               <span>PC版</span>-->
<!--               </div>-->

<!--                 <div style="width: 20%;text-align: center" >-->
<!--                   <el-icon><Monitor /></el-icon>-->
<!--                   <br>-->
<!--                   <span>MAC版</span>-->
<!--                 </div>-->
<!--                 <div style="width: 20%;text-align: center">-->
<!--                   <el-icon><Pear /></el-icon>-->
<!--                   <br>-->
<!--                   <span>Andriod版</span>-->
<!--                 </div>-->
<!--                 <div style="width: 20%;text-align: center">-->
<!--                   <el-icon><Apple /></el-icon>-->
<!--                   <br>-->
<!--                   <span>iPhone版</span>-->
<!--                 </div>-->

<!--               </div>-->

<!--             </el-col>-->
              <el-col :span="8">
                <el-card style="font-size: 14px;background-color: #333;border: none;box-shadow: none;width: 400px; height: 300px;">
                  <p style="margin-top: 40px;color: grey">下载QQ音乐客户端</p>
                  <el-row style="color: gray">
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p1.png"></el-button></el-col>
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p2.png"></el-button></el-col>
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p3.png"></el-button></el-col>
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p4.png"></el-button></el-col>
                    <el-col class="btdown":span="6">PC版</el-col>
                    <el-col class="btdown":span="6">Mac版</el-col>
                    <el-col class="btdown":span="6">Android版</el-col>
                    <el-col class="btdown":span="6">ios版</el-col>
                  </el-row>
                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card style="font-size: 14px;background-color: #333;border: none;box-shadow: none;width: 400px; height: 300px;">
                  <p style="margin-top: 40px;color: grey">特色产品</p>
                  <el-row style="color: gray">
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p5.png"></el-button></el-col>
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p6.png"></el-button></el-col>
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p7.png"></el-button></el-col>
                    <el-col :span="6"><el-button type="text" style="margin-top: 6px"><img src="/image/p8.png"></el-button></el-col>
                    <el-col class="btdown":span="6" style="margin-top: 10px">全民K歌</el-col>
                    <el-col class="btdown":span="6">银河音效</el-col>
                    <el-col class="btdown":span="6"style="margin-top: 14px">QPlay</el-col>
                    <el-col class="btdown":span="6">Fan直播伴侣</el-col>
                    <el-col class="btdown":span="6">车载互联</el-col>
                    <el-col class="btdown":span="6">QQ演出</el-col>
                  </el-row>
                </el-card>

<!--                <el-row :gutter="10">-->
<!--                 <el-col :span="6">-->
<!--                   <el-card class="box-card"style="background-color: #282c30;border: none" >-->
<!--&lt;!&ndash;                   <p style="margin-top: 40px;color: grey">下载QQ音乐客户端</p>&ndash;&gt;-->
<!--                   <el-icon><Platform /></el-icon>-->
<!--                   <br>-->
<!--                   <span>PC版</span>-->
<!--                 </el-card>-->
<!--                 </el-col>-->
<!--                </el-row>-->
<!--                <p style="margin-top: 60px;color: grey">下载QQ音乐客户端</p>-->
<!--                <div style="display: flex;color: grey">-->

<!--                  <div style="width: 20%;text-align: center;">-->
<!--                    <el-icon><Platform /></el-icon>-->
<!--                    <br>-->
<!--                    <span>PC版</span>-->
<!--                  </div>-->

<!--                  <div style="width: 20%;text-align: center" >-->
<!--                    <el-icon><Monitor /></el-icon>-->
<!--                    <br>-->
<!--                    <span>MAC版</span>-->
<!--                  </div>-->
<!--                  <div style="width: 20%;text-align: center">-->
<!--                    <el-icon><Pear /></el-icon>-->
<!--                    <br>-->
<!--                    <span>Andriod版</span>-->
<!--                  </div>-->
<!--                  <div style="width: 20%;text-align: center">-->
<!--                    <el-icon><Apple /></el-icon>-->
<!--                    <br>-->
<!--                    <span>iPhone版</span>-->
<!--                  </div>-->

<!--                </div>-->
                </el-col>

              <el-col :span="8">
                <el-card style="font-size: 14px;background-color: #333;border: none;box-shadow: none;width: 400px; height: 300px;">
                  <p style="margin-top: 40px;color: grey">合作链接</p>
                  <el-row style="color: gray">
                    <el-col :span="8" style="margin-top: 10px" >CJ ENM</el-col>
                    <el-col :span="8" style="margin-top: 10px">腾讯视频</el-col>
                    <el-col :span="8" style="margin-top: 10px">手机QQ空间</el-col>
                    <el-col :span="8" style="margin-top: 10px">最新版QQ</el-col>
                    <el-col :span="8" style="margin-top: 10px">腾讯社交广告</el-col>
                    <el-col :span="8" style="margin-top: 10px">电脑管家</el-col>
                    <el-col :span="8" style="margin-top: 10px">QQ浏览器</el-col>
                    <el-col :span="8" style="margin-top: 10px">腾讯微云</el-col>
                    <el-col :span="8" style="margin-top: 10px">腾讯云</el-col>
                    <el-col :span="8" style="margin-top: 10px">企鹅FM</el-col>
                    <el-col :span="8" style="margin-top: 10px">智能电视网</el-col>
                    <el-col :span="8" style="margin-top: 10px">当贝市场</el-col>
                    <el-col :span="8" style="margin-top: 10px">酷我音乐</el-col>
                    <el-col :span="8" style="margin-top: 10px">酷狗听书</el-col>
                  </el-row>
                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card style="font-size: 14px;background-color: #333;border: none;box-shadow: none;width: 400px; height: 300px;">
                  <p style="margin-top: 5px;color: grey">开放平台</p>
                  <el-row style="color: gray">
                    <el-col :span="9" style="margin-top: 10px" >QQ音乐开放平台</el-col>
                    <el-col :span="6" style="margin-top: 10px">腾讯音乐人</el-col>
                    <el-col :span="9" style="margin-top: 10px">音乐推-歌曲推广</el-col>
                    <el-col :span="9" style="margin-top: 10px">TME聚星-歌曲定制</el-col>
                    <el-col :span="15" style="margin-top: 10px">启明星Venus-词曲交易/歌曲推广</el-col>
                    <el-col :span="8" style="margin-top: 14px">TME Studio</el-col>
                    <el-col :span="8" style="margin-top: 10px">臻品音质认证</el-col>
                  </el-row>
                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card style="font-size: 14px;background-color: #333;border: none;box-shadow: none;width: 400px; height: 300px;">
                  <p style="margin-top: 5px;color: grey">TEM集团官网</p>
                  <el-row style="color: gray">
                    <el-col :span="8" style="margin-top: 10px" >CJ ENM</el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>

        <el-row :gutter="10">
         <el-col :span="4">10</el-col>
          <el-col :span="16">
            <p style="color: grey;text-align: center;font-size: 8px">关于腾讯 |About Tencent |服务条款 |用户服务协议 |隐私政策 |权利声明 |广告服务 |腾讯招聘 |客服中心 |网站导航 |举报中心</p>
            <p style="color: grey;text-align: center;font-size: 8px">Copyright © 1998 - 2024 Tencent. All Rights Reserved.</p>
            <p style="color: grey;text-align: center;font-size: 8px">腾讯公司 版权所有｜营业执照｜网络文化经营许可证：粤网文[2023]2882-203号｜客服电话：4006016666｜违法与不良信息举报邮箱：tme_musicjubao@tencentmusic.com</p>
            <p style="color: grey;text-align: center;font-size: 8px">2312班-洛阳-张宇翔、呼和浩特-张永薪、天津-赵伟成-项目经理老师:周思雨</p>
          </el-col>
          <el-col :span="4">10</el-col>
        </el-row>


      </el-footer>
    </el-container>
  </div>
</template>


<script setup>
import {ElMessage} from "element-plus"
import {ref} from "vue";
import {Search} from '@element-plus/icons-vue'
const activeMenu=ref('')
const handleSelect=(index)=>{
  activeMenu.value=index;
}
</script>

<style>
.btdown{
  margin-top: 10px;
}
</style>
